<script lang="ts" setup>
import type { ProcessItem } from '@vben/types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { useAnalyticsStore } from '#/store';

const analyticsStore = useAnalyticsStore();

function bytesToGB(bytes: number | undefined, is_number: boolean = false) {
  if (bytes === undefined) return 0;
  // 将字节转换为GB，1GB = 1024 * 1024 * 1024 字节
  const gb = bytes / (1024 * 1024 * 1024);
  if (is_number) return gb.toFixed(2);
  // 使用 toFixed 方法保留两位小数
  return `${gb.toFixed(2)} GB`;
}

const gridOptions: VxeGridProps<ProcessItem> = {
  columns: [
    { title: '序号', type: 'seq', width: 50 },
    { field: 'mount', title: '挂载卷' },
    { field: 'fileType', title: '文件类型' },
    {
      field: 'spaceFree',
      title: '空闲大小',
      formatter({ cellValue }) {
        return bytesToGB(Number(cellValue));
      },
    },
    {
      field: 'spaceTotal',
      title: '总大小',
      formatter({ cellValue }) {
        return bytesToGB(Number(cellValue));
      },
    },
  ],
  proxyConfig: {
    ajax: {
      query: async () => {
        const data = await analyticsStore.getRecentFileInfo();
        return { records: data };
      },
    },
  },
  pagerConfig: {
    enabled: false,
  },
};

const [Grid] = useVbenVxeGrid({ gridOptions });
</script>

<template>
  <div class="mt-5 pb-5">
    <Grid table-title="文件信息" class="px-3">
      <!-- <template #top>
        <div class="text-center text-lg">文件信息</div>
      </template> -->
    </Grid>
  </div>
</template>
